<style>
    .layui-input, .layui-textarea {
        display: block;
        width: 85%;
        padding-left: 10px;
    }

    .layui-input-block {
        margin-left: 114px;
        min-height: 36px;
    }

    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 113px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .layui-form-select dl {
        left: 33px;
        min-width: 85%;
    }
</style>

<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="productReviewDetailForm" class="layui-form model-form">
    <div id="customerProductInfo">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>客户产品规划(根据客户产品拆解为不同的组件BOM)</legend>
        </fieldset>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">客户产品编码：</label>
                <div class="layui-input-block">
                    <input name="cusProductCode" type="text" class="layui-input"
                           disabled autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">客户产品名称：</label>
                <div class="layui-input-block">
                    <input name="cusProductName" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">客户编码：</label>
                <div class="layui-input-block">
                    <input name="customerCode" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">产品图号：</label>
                <div class="layui-input-block">
                    <input name="cusProductFigure" type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">客户备注：</label>
                <div class="layui-input-block">
                    <input name="remark" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">物资类别：</label>
                <div class="layui-input-block">
                    <input name="cusProductType" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">所属订单编号：</label>
                <div class="layui-input-block">
                    <input name="orderCode" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">计划交货时间：</label>
                <div class="layui-input-block">
                    <input type="text" id="givenPlanningTime" name="reviewEndTime" class="layui-input"
                           placeholder="请选评审截止时间">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-block">
                    <input name="productStatus" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">创建人：</label>
                <div class="layui-input-block">
                    <input name="creator" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">创建时间：</label>
                <div class="layui-input-block">
                    <input name="createTime" disabled type="text" class="layui-input"
                           required autocomplete="off"/>
                </div>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>BOM信息</legend>
    </fieldset>

    <div class="layui-form-item layui-row" style="margin-left: 30px">
        <div class="lay-btn-rows">
            <div class="lay-btn-box">
                <div class="lay-btn-lt">
                    <button id="productBOMAdd" type="button" class="layui-btn icon-btn color-reseda">添加BOM信息</button>
                </div>
                <div class="lay-btn-rt">

                </div>
            </div>
        </div>
        <!-- 表格 -->
        <table class="layui-table" id="bomTreeTableInfo" lay-filter="bomTreeTableInfo"></table>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="productReviewFormSubmit" lay-submit>保存</button>
    </div>
</form>


<!-- 添加修改BOM信息 -->
<script type="text/html" id="productReviewBomForm">
    <form lay-filter="productReviewBomForm" class="layui-form model-form">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>创建方式</legend>
        </fieldset>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">创建方式：</label>
                <div class="layui-input-block">
                    <select id="createFuncBom" name="createFuncBom" lay-filter="createFuncBom"
                            class="common-select-search">
                        <option value="1">创建新产品料号</option>
                        <option value="2">选择已有产品料号</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">产品所属类别：</label>
                <div class="layui-input-block">
                    <div style=" margin-left: 33px;width: 84%; " id="productTypeNameBom"
                         lay-filter="productTypeNameBom">
                    </div>
                    <input id="productTypeBomId" name="productTypeBomId" type="hidden"
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">产品名称：</label>
                <div class="layui-input-block" id="productNameDiv">
                    <input type="text" id="productNameBom" name="productNameBom" class="layui-input"
                           placeholder="请输入名称">
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>产品信息</legend>
        </fieldset>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">物资类别性质*：</label>
                <div class="layui-input-block">
                    <select id="productTypeNatureBom" name="productTypeNatureBom" lay-filter="productTypeNatureBom"
                            lay-search
                            lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">所属工序*：</label>
                <div class="layui-input-block">
                    <select id="processIdBom" name="processIdBom" lay-filter="processIdBom"
                            lay-search
                            lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">产品类别*：</label>
                <div class="layui-input-block">
                    <select id="productTypeBom" name="productTypeNatureBom" lay-filter="productTypeNatureBom" lay-search
                            lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">产品性质*：</label>
                <div class="layui-input-block">
                    <select id="productNatureBom" name="productNatureBom" lay-filter="productNatureBom"
                            lay-search
                            lay-verify="required"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">产品属性*：</label>
                <div class="layui-input-block">
                    <select id="assemblyNatureBom" name="assemblyNatureBom" lay-filter="assemblyNatureBom"
                            lay-search
                            lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">自定义分类*：</label>
                <div class="layui-input-block">
                    <select id="customClassifyBom" name="customClassifyBom" lay-filter="customClassifyBom"
                            lay-search
                            lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">SKU编号*：</label>
                <div class="layui-input-block">
                    <input type="text" id="SkuCodeBom" name="SkuCodeBom" class="layui-input"
                           placeholder="请输入编号">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">SKU产品名称*：</label>
                <div class="layui-input-block">
                    <input type="text" id="skuNameBom" name="skuNameBom" class="layui-input"
                           placeholder="请输入名称">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md6">
                <label class="layui-form-label">备注说明*：</label>
                <div class="layui-input-block">
                <textarea id="skuRemarkBom" name="skuRemarkBom" placeholder="工艺说明" class="layui-textarea"
                          autocomplete="off"/>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>标准规格码参数信息</legend>
        </fieldset>

        <div class="layui-form-item layui-row" id="activeSpecDiv">
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">规格码：</label>
                <div class="layui-input-block">
                    <input type="text" id="specificationCodeBom" name="specificationCodeBom" class="layui-input"
                           placeholder="请输入规格码">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">旧规格码：</label>
                <div class="layui-input-block">
                    <input type="text" id="oldSpecificationCodeBom" name="oldSpecificationCodeBom" class="layui-input"
                           placeholder="请输入旧规格码">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">基础单位：</label>
                <div class="layui-input-block">
                    <input type="text" id="baseUnitBom" name="baseUnitBom" class="layui-input"
                           placeholder="请输入基础单位">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">所需数量*：</label>
                <div class="layui-input-block">
                    <input type="text" id="baseUnitCountBom" name="baseUnitCountBom" class="layui-input"
                           placeholder="请输入基础单位">
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>其他信息</legend>
        </fieldset>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">入库单位*：</label>
                <div class="layui-input-block">
                    <select id="warehousingUnitBom" name="warehousingUnitBom" lay-filter="warehousingUnitBom"
                            class="common-select-search">
                        <option value="">请选择</option>
                        <option value="1">包</option>
                        <option value="3">盒</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">计价币种：</label>
                <div class="layui-input-block">
                    <select id="priceCurrencyBom" name="priceCurrencyBom" lay-filter="priceCurrencyBom"
                            class="layui-input borderNone"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">默认税率*：</label>
                <div class="layui-input-block">
                    <input type="text" id="taxRateBom" name="taxRateBom" class="layui-input"
                           placeholder="请输入税率">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">安全库存数*：</label>
                <div class="layui-input-block">
                    <input type="text" id="warningQuantityBom" name="warningQuantityBom" class="layui-input"
                           placeholder="请输入库存数">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">是否可以销售：</label>
                <div class="layui-input-block">
                    <select id="sellStatusBom" name="sellStatusBom" lay-filter="sellStatus" class="layui-input borderNone"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">质保期(天)：</label>
                <div class="layui-input-block">
                    <input name="warrantyDayBom" placeholder="质保期" id="warrantyDayBom" class="layui-input borderNone" type="text"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">呆滞警时时长：</label>
                <div class="layui-input-block">
                    <input name="lethargyThresholdBom" placeholder="呆滞预警时长(天)" id="lethargyThresholdBom" class="layui-input borderNone"
                           type="text"/>
                </div>
            </div>

            <div class="layui-col-md3">
                <label class="layui-form-label">是否一物一码：</label>
                <div class="layui-input-block">
                    <select id="thingCodeStatusBom" name="thingCodeStatusBom" lay-filter="thingCodeStatusBom"
                            class="layui-input borderNone"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">是否批次管理：</label>
                <div class="layui-input-block">
                    <select id="batchStatusBom" name="batchStatusBom" lay-filter="batchStatusBom"
                            class="layui-input borderNone"></select>
                </div>
            </div>

            <div class="layui-col-md3">
                <label class="layui-form-label">是否先进先出：</label>
                <div class="layui-input-block">
                    <select id="inoutStatusBom" name="inoutStatusBom" lay-filter="inoutStatusBom"
                            class="layui-input borderNone"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">选择工艺路线：</label>
                <div class="layui-input-block">
                    <select id="processRouteBom" name="processRouteBom" class="layui-input"
                            class="common-select-search"></select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">上传图纸附件：</label>
                <div class="layui-input-block">
                    <div id="fileUploadBtn" class="layui-btn" style="float: left;margin-left: 3px"><i
                            class="layui-icon">&#xe681;</i>上传文件
                    </div>
                    <br/>
                    <div id="addHeaderPdf" class="companyFormPhotos"></div>
                    <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input"
                           lay-verify="attachmentPdf"/>
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label">工艺说明：</label>
                <div class="layui-input-block">
                        <textarea name="processDescription" placeholder="工艺说明" class="layui-textarea"
                                  autocomplete="off"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="productReviewBomFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'tableTreeDj', 'table', 'laydate', 'admin', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;
        var tableTree = layui.tableTreeDj;

        let selectDataInfo = [];
        let aaa = {
            id:"1565900875851436046",
            name:"总长",
            idName:"countLength",
            style:"single",
            specValues:"40,50,60"
        }
        let bbb = {
            id:"1565900875851436047",
            name:"柄径",
            idName:"bingJin",
            style:"single",
            specValues:"40,50,60"
        }

        let ccc = {
            id:"1565900875851436048",
            name:"code码",
            idName:"codeMa",
            style:"text",
            specValues:""
        }
        selectDataInfo.push(aaa);
        selectDataInfo.push(bbb);
        selectDataInfo.push(ccc);
        let data = admin.getTempData("planningData");
        form.val('productReviewDetailForm', data === undefined ? null : data);

        let customerName = "";
        let postName = "";

        let fileName = "";

        // 添加BOM信息
        $("#productBOMAdd").click(function () {
            showEditModel(null);
        })

        function showEditModel(data) {
            let title = data == null ? "添加产品BOM信息" : "修改产品BOM信息";
            admin.open({
                type: 1,
                area: ['1280px'],
                offset: ['115px', '450px'],
                style: 'font-size: 20px;',
                title: title,
                content: $('#productReviewBomForm').html(),
                success: function () {
                    let createFunc = "";
                    //创建方式的选择事件
                    form.on('select(createFuncBom)',function (data) {
                        $("#activeSpecDiv").html("");
                        createFunc = data.value;
                        let html = "";
                        if (createFunc === '2') {
                            html = '<select id="productNameBom" name="productNameBom" lay-filter="productNameBom" class="layui-input borderNone"></select>';
                            $('#productNameDiv').html(html);
                            layui.form.render("select");
                            //初始化产品类型
                            admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3,7]}, 'productTypeNameBom', null, "物料分类", "productTypeIdBom", function (data) {
                                //产品类别的选择回调
                                let productTypeId = data.change[0].value;
                                //根据产品类型 初始化产品名称
                                admin.initDataSelect("enterprise/product/admin/productDetailWMS/list?page=1&limit=9999&categoryType=production&productTypeId=" + productTypeId, null, "productNameBom", null, "产品名称", "skuName", "id");
                            });
                        } else {
                            html = '<input type="text" id="productNameBom" name="productNameBom" class="layui-input"\n' +
                                '                           placeholder="请输入名称">';
                            admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3,7]}, 'productTypeNameBom', null, "物料分类", "productTypeIdBom", null);
                            $('#productNameDiv').html(html);
                        }
                        //生成规格信息
                        let specHtml = "";
                        $.each(selectDataInfo,function (index,value){
                            let name = value.name;
                            let idName = value.idName;
                            let type = value.style;
                            let values = value.specValues.split(",");
                            //下拉框
                            if (type === 'single'){
                                let selectHtml = '<div class="layui-col-md3">' +
                                    '<label class="layui-form-label">'+name+'：</label>' +
                                    '<div class="layui-input-block">'+
                                    '<select id='+idName+' name='+idName+' class="layui-input" class="common-select-search">' +
                                    '<option value="">请选择</option>'+
                                    '</select>'+
                                    '</div>'+
                                    '</div>';
                                $("#activeSpecDiv").append(selectHtml);
                                $.each(values, function (index, value) {
                                    $("#"+idName).append(`<option value="${value}">${value}</option>`);
                                });
                                layui.form.render('select');
                            }else if(type === 'text'){
                                let selectHtml =  '<div class="layui-col-md3">' +
                                    '<label class="layui-form-label">'+name+'：</label>' +
                                    '<div class="layui-input-block">'+
                                    '<input name='+idName+' id='+idName+' placeholder="请输入'+name+'" class="layui-input borderNone"/>'+
                                    '</div>'+
                                    '</div>';
                                $("#activeSpecDiv").append(selectHtml);
                            }
                        })

                    });

                    //根据产品类型 查询出规格列表 动态渲染

                    admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3,7]}, 'productTypeNameBom', null, "物料分类", "productTypeIdBom", null);

                    //物料类别性质
                    admin.getDictList("productTypeNatureBom", "sys_product_type_nature", data ? data.productTypeNature : null, "物料类别性质");
                    //是否可以销售
                    admin.getDictList("sellStatusBom", "sys_yes_no", null, "是否可以销售");

                    //是否一物一码
                    admin.getDictList("thingCodeStatusBom", "sys_yes_no", null, "是否一物一码");
                    //是否批次管理
                    admin.getDictList("batchStatusBom", "sys_yes_no", null, "是否批次管理");
                    //是否先进先出
                    admin.getDictList("inoutStatusBom", "sys_yes_no", null, "是否先进先出");

                    //产品性质
                    admin.getDictList("productNatureBom", "product_nature", null, "产品性质");

                    //产品属性
                    admin.getDictList("assemblyNatureBom", "product_assembly_nature", null, "产品属性");
                    form.render("select")
                }
            });
        }

        // 渲染表格
        let treeTable = tableTree.render({
            id: '#bomTreeTableInfo',
            elem: '#bomTreeTableInfo',
            url: config.base + 'enterprise/product/admin/planning/productPlanning/bomTree/' + data.id,
            page: false,
            cellMinWidth: 100,
            where: {limit: 9999},
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                , {field: 'productName', sort: true, title: 'BOM产品名称'}
                , {field: 'productCode', sort: true, title: '产品编号'}
                , {field: 'productTypeName', sort: true, title: '物资类别'}
                , {field: 'assemblyNatureName', sort: true, title: '产品性质', width: 100}
                , {field: 'processNodeTypeName', sort: true, title: '工序类型'}
                , {field: 'cusProductTypeName', sort: true, title: '所属类别'}
                , {field: 'inSkuUnitName', sort: true, title: '计量单位', width: 90}
                , {field: 'inUnitCount', sort: true, title: '需求数', width: 80}
                , {field: 'remark', sort: true, title: '描述'}
                , {align: 'center', toolbar: '#bomProductPlanningTableBar', title: '操作', width: 240}
            ]],
            done: function (res, curr, count) {
                //移除按钮
                var menuButton = config.getMenuButton(location.hash);
                if (menuButton.indexOf("搜索") == -1) {
                    $('.layui-form.toolbar').remove();
                }
                if (menuButton.indexOf("修改") == -1) {
                    $("[lay-event='edit']").remove();
                }
                if (menuButton.indexOf("删除") == -1) {
                    $("[lay-event='del']").remove();
                }
            }
        }, {keyPid: "parentId", title: "productName"});

        //表单提交事件
        form.on('submit(productReviewFormSubmit)', function (d) {
            layer.load(2);
            d.field.customerName = customerName;
            d.field.postName = postName;
            d.field.fileName = fileName;
            d.field.reviewProcessId = "1";
            admin.req('enterprise/product/admin/productReview/add', d.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('productPlanningTableInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
            return false;
        });

        //时间选择器
        laydate.render({
            elem: '#givenPlanningTime'
            , type: 'datetime'
        });

    });
</script>

<!-- 表格操作列 -->
<script type="text/html" id="bomProductPlanningTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">编辑</a>
    {{# if(d.assemblyNature != '3'){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="planning">添加下级</a>
    {{#}}}

    {{# if(d.assemblyNature == '3'){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="blueprints">图纸管理</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="processRoute">工艺路线</a>
    {{#}}}
</script>